import React from "react";
import classNames from 'classnames';
import { isWrapper } from "./typeof";
import { Consumer } from "../../components/theme";
import { viewTypes } from "../../constants/form";
import './View.less';
import FieldError from './field/Error';
import Components from './Components';
import { Tools } from 'weaver-mobile';
import { comsType } from '../../constants/form';

const { DATATABLE } = comsType;
const getLabel = Tools.getLabel;
const formatMultiLang = Tools.base64.getCurrentLabel;
const { MOBILE, MOBILE_WX } = viewTypes;
const dividerStyle = {
  marginBottom: '10px',
  borderTop: '1px dashed #aab2bd'
};

const dataTableExtra = () => (
  <span className='wea-edc-title-extra'>
    <span><i className='anticon anticon-plus'></i>{getLabel('506103', '添加')}</span>
    <span className='delete'><i className='anticon anticon-minus'></i>{getLabel(502286, '删除')}</span>
  </span>
)

export default class View extends React.Component {

  _renderContent(data, value) {
    const { type, ...res } = this.props;
    const View = Components[type];

    if (View) {
      return (<View data={data} value={value} {...res} />)
    } else {
      return null;
    }
  }

  shouldRender() { return true; }
  renderExtra() { return null; }
  renderForPC() { return null; }
  renderForMobile() { return null; }

  renderForNoCubeCategory() {
    return (
      <div className={'wea-edc-com-tips'}>
        <FieldError error={getLabel('511746', '附件上传目录未设置')} />
      </div>
    );
  }

  hasDivider() {
    const { data: { divider }, type } = this.props;

    return 'description' === type.toLowerCase() && (1 === divider || '1' === divider);
  }

  getWrapperStyle(field) {
    const hasDivider = this.hasDivider();
    const style = { paddingBottom: field.space };

    if (hasDivider) {
      style.paddingTop = 10;
    }

    return style;
  }

  render() {
    const { type, data, value, viewType = MOBILE } = this.props;
    const { title, subTitle, disableTitle = false, desc, required, align = 'vertical' } = data;

    if (!this.shouldRender()) return null;

    const clsNameStr = classNames(`wea-edc-form-${type.toLowerCase()}`, {
      'wea-edc-wrapper-com': isWrapper({ type })
    });

    return (
      <Consumer>
        {({ field, isSetCategory, formmodeId }) => (
          <div
            className={classNames(clsNameStr, { horizontal: 'horizontal' === align })}
            style={this.getWrapperStyle(field)}
          >
            {!this.hasDivider() ? null : <div style={dividerStyle} />}
            {
              disableTitle ? null :
                <div className='wea-edc-com-title'>
                  <label style={field.css}>
                    <span className={required === '1' ? 'wea-edc-com-required' : undefined} style={field.css}>
                      {formatMultiLang(title)}
                      {!subTitle ? null : <span className='wea-edc-com-subTitle'>{`(${subTitle})`}</span>}
                    </span>
                    {DATATABLE === type && dataTableExtra()}
                  </label>
                  {(!desc) ? null : <label className='wea-edc-com-desc' dangerouslySetInnerHTML={{ __html: desc }} />}
                </div>
            }
            {this._renderContent('isSetCategory' in data ? data : Object.assign({}, data, { isSetCategory: isSetCategory, formmodeId: formmodeId }), value, [MOBILE_WX, MOBILE].includes(viewType))}
            {this.props.children}
          </div>
        )}
      </Consumer>
    );
  }
}

View.defaultProps = {
  viewType: MOBILE,
  onChange: () => { },
  toggleFooterDisable: () => { }
};